<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<!-- JavaScript：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		     学习主体：针对页面操作比较多 ----DOM操作
			 JQuery操作DOM： 理解：JQ框架页面内容效果
			 js基础就可以直接学习,了解函数使用
			 基础函数----事件源之后出现，事件源语法堂中
			 html()     作用：增加一个元素，覆盖原有的html
			 val()      作用：针对input元素，实现修改文本框内容
			 text()     作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后，改变下面产生一行文本 -->
		<button>按钮</button>
		<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima dolores reiciendis incidunt sint deserunt. Ab, similique veniam ducimus nisi sit temporibus dolor repellendus aliquam? Perferendis nemo ipsum similique provident neque?</p>
	    <div style="width: 200px; height: 200px; background: #ffff00;"></div>
		<h3>lorem</h3>
		
		<input type="button" value="按钮2" />
		<input type="text" />
		<script>
			$("button").click(function(){
				/* JQ操作DOM--html()函数使用 */
				$("p").html("<h1>JQ操作DOM-html函数使用</h1>")
			});
			/* 练习1：div 200*200 背景颜色自定义，鼠标滑过之后，
			 下面内容修改：<h3>提示，修改为自定义颜色 */
			 $("div").mouseenter(function(){
				 $("h3").html("<h3>red</h3>")
			 });
			/* 练习2：按钮 文本框     点击按钮，文本增加一行文本 */
			$("input[type='button']").click(function(){
				//alert("jq选择器是否选中")；
				$("input[type='text']").val("文本框内容修改~")  
			});
			/* 利用JQuery操作DOM （页面效果）：1.元素内容操作（3个函数）
			                                html()
											val()
											text()
			                                 2.属性操作（4个函数）
											 <p align="center">
											 attr()
											 removeAttr()
											 <input cheked>
											 prop()
											 removeProp()
											 3.样式类名操作(4个函数)
											 .demo{属性：属性值..}
											 addClass()
											 removeClass()
											 toggleClass()
											 hasClass()
											 4.元素样式操作（5个函数）
											 css()
											 语法：css("属性"，"css属性值")
											 $("选择器").attr().addClass()
											 5.插入和删除操作（7个函数）
											 6.元素遍历操作（6个函数）
											 7.JQ动画操作（7个函数）
			 */ 
		</script>
	</body>
</html>